const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
  /** 
   * mode属性有三种取值，分别是 production、development 和 none
   * 1. 生产模式下，Webpack 会自动优化打包结果；
   * 2. 开发模式下，Webpack 会自动优化打包速度，添加一些调试过程中的辅助；
   * 3. None 模式下，Webpack 就是运行最原始的打包，不做任何额外处理；
  */
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './public',
    // 开启热更新 -> Vue下无效果
    hot: true,
    proxy: {
      '/api': {
        // 代理目标 https://localhost:8080/api/users => https://api.github.com/api/users
        target: 'https://api.github.com',
        pathRewrite: {
          '^/api': ''
        },
        /** 
         * 会保留主机名 => 不能使用localhost:8080 作为请求 github 的主机名
         * 开启changeOrigin 以实际代理请求的主机名去请求 api.github.com
        */ 
        changeOrigin: true
      }
      /** 
       * 多种路径转发
      */
      // target: 'https://api.github.com',
      // context: ['/api', '/wp'],
      // pathRewrite: {
      //   '^/api': '',
      //   '^/wp': ''
      // },
      // changeOrigin: true
    },
  },
  plugins: [
    // [内置插件] 为代码注入全局成员
    // 由于本插件会直接替换文本，因此提供的值必须在字符串本身中再包含一个 实际的引号 。通常，可以使用类似 '"production"' 这样的替换引号，或者直接用 JSON.stringify('production')
    new webpack.DefinePlugin({
      API_BASE_URL: JSON.stringify('https://api.github.com')
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
})